<template>
  <view class="pagecon">
    <head-box></head-box>
    <view class="header-search">
      <view class="index-top-header-search">
        <image
            class="search-icon"
            src="/static/img/search-icon.png"
            mode=""
            @click="searchWord"
        ></image>
        <input
            class="search-input"
            type="text"
            v-model="search"
            placeholder="请输入阵地名称"
            @confirm="searchWord"
            confirm-type="search"
        />
        <image
            class="search-icon-r"
            style="display: none"
            src="/static/img/yy_ico.png"
            mode=""
        ></image>
      </view>
      <view class="top_select">
        <view class="item">
          <picker class="_choose-type" @change="cityPicker" :value="cityIndex" :range="cityArr">
            <view class="uni-input _choose-type-text">
              {{ cityArr[cityIndex] }}
              <image
                  class="drop-dowm-img"
                  src="/static/img/drop-down.png"
                  mode="widthFix"
              ></image>
            </view>
          </picker>
        </view>
        <view class="item">
          <picker
              class="_choose-type"
              ref="dataPicker2"
              @change="typePicker"
              :value="typeIndex"
              :range="typeArr"
          >
            <view class="uni-input _choose-type-text">
              {{ typeArr[typeIndex] }}
              <image
                  class="drop-dowm-img"
                  src="/static/img/drop-down.png"
                  mode="widthFix"
              ></image>
            </view>
          </picker>
        </view>
      </view>
      <baidu-map></baidu-map>
    </view>
    <frontList
        :list="dataList"
        @click="item=>getGroupUrlCbId(item)"
    ></frontList>
    <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" class="tab-botton" />
    <tabs-box></tabs-box>
  </view>
</template>

<script>
  import frontList from '@/components/frontList/frontList'
  import baiduMap from './compoentns/baidu-map'
  import { mixins1 } from '@/mixins/mixins-1'
  import {getDictItemstList} from '@/api/dict'
  import {getFrontFrom} from '@/common/type'
  import {getGroupUrl} from '@/api/group'
  export default {
    mixins: [mixins1],
    components: {
      frontList,
      baiduMap,
    },
    data() {
      return {
        typeValue:'3',//除了3之外的1，2，4，5可以 跳第三方
        cityIndex: 0,//城区索引
        cityArr: ['全部城区'], //城区
        AreaCode: [''],//城区code
        typeIndex: 0,//分类索引
        typeArr: ['全部类型'],//分类
        typeArrCode: [''],//分类code
        lat: 29.59, //默认北京定位 经度
        lng: 119.05, //维度
      }
    },
    onLoad(options) {
      this.typeValue = options.value
      this.gpinFoareaCode()
      this.getFrontType()
      this.gpFrontList()
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods: {
      //分类
      typePicker(e) {
        this.typeIndex = e.target.value
        this.frontType = this.typeArrCode[this.typeIndex]
        this.onRestFn()
        this.gpFrontList()
      },
      //直接跳第三方页面
      getGroupUrlCbId({id,frontFrom,frontUrl,frontCode,frontName}){
        this.$clickGpFrontPv({frontCode,frontName})
        return getFrontFrom(getGroupUrl,id,frontFrom,frontUrl, this.typeValue)
      },
      //市区
      cityPicker(e) {
        this.cityIndex = e.target.value
        this.onRestFn()
        this.gpFrontList()
      },
      //搜索内容
      searchWord() {
        this.onRestFn()
        this.gpFrontList()
      },
      //阵地列表数据
      async gpFrontList () {
        const params = {
          frontPublic: 1,
          frontHidden: 2,
          frontAreaCode:this.AreaCode[this.cityIndex],
          frontType:`**`,
          frontName: `*${this.search}*`
        }
        await  this.gpFrontListData(params)
      },
      //市区
      async gpinFoareaCode() {
        const {code,result}=await getDictItemstList({dictCode:'new_area_code'})
        if(code===0){
          result.map(item=>{
            const {value,text} = item
            this.AreaCode.push(value)
            this.cityArr.push(text)
          })
        }
      },
      //分类
      async getFrontType() {
        const {code,result}=await getDictItemstList({dictCode:'front_type'})
        if(code===0){
          result.map(item=>{
            const {value,text} = item
            this.typeArrCode.push(value)
            this.typeArr.push(text)
          })
        }
      },
    },
  }
</script>

<style lang="scss">
  .pagecon {
    min-height: 100vh;
    .zpaging {
      height: calc(100vh - 140rpx);
    }
  }

  .top_select {
    display: flex;
    flex-direction: row;
    padding: 30rpx 40rpx;
    background-color: #fff;
    .item {
      width: 33%;
      text-align: left;
      font-size: 30rpx;
      ._choose-type {
        image {
          width: 20rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .header-search {
    margin-top: 0rpx;
    padding: 30rpx 30rpx 0 30rpx;

    .index-top-header-search {
      width: 100%;
      height: 80rpx;
      // background-color: rgba(255,255,255,0.65);
      border-radius: 10rpx;
      box-sizing: border-box;
      border: 1px solid #eee;
      position: relative;
      .search-icon {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        top: 0;
        left: 5rpx;
        right: 0;
        bottom: 0;
        margin: auto;
        margin-left: 12rpx;
      }
      .search-icon-r {
        width: 35rpx;
        height: 35rpx;
        position: absolute;
        top: 0;
        right: 20rpx;
        bottom: 0;
        margin: auto;
        margin-left: 12rpx;
      }
      .search-input {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 10rpx;
        display: flex;
        background-color: rgba(255, 255, 255, 0.65);
        padding: 0 60rpx;
        font-size: 30rpx;
        box-sizing: border-box;
        background-color: #f3f3f3;
      }
    }
    .search_bq_title {
      font-size: 30rpx;
    }
    .search_bq_list {
      margin-bottom: 20rpx;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .search_bq {
        font-size: 24rpx;
        padding: 20rpx 30rpx;
        background-color: #eee;
        border-radius: 10rpx;
        margin: 5rpx;
      }
      .select_search {
        background-color: #bfacfb;
        color: #fff;
      }
    }
  }
</style>
